<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>

  <div id='app'>

    <h1>标题</h1>
    <!-- 路由组件的出口 -->
    <router-view />
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script src="./vue-router.js"></script>
<script>
  /*
    引入vue-router
      1. 在vue.js后面引入
      2. 往Vue构造函数上，加了点东西，让实例上增加俩属性
  */
  const Home = {
    template: `
      <div>
        home页
      </div>
    `
  }
  const About = {
    template: `
      <div>
        关于我们
      </div>
    `
  }
  const News = {
    template: `
      <div>
        新闻页
      </div>
    `
  }
  // 定义路由
  const routes = [   // 配置路由规则
    {
      path: '/home',
      component: Home
    },
    {
      path: '/news',
      component: News
    },
    {
      path: '/about',
      component: About
    }
  ]
  const router = new VueRouter({  // 注册路由
    routes
  })
  const app = new Vue({
    el: '#app'
    ,router   // 挂载实例
  })

  window.onhashchange = function() {
    console.log('hash变化了');
  }
</script>
</body>
</html>